<template>
  <view class="bill-box" v-if="dataArr && dataArr.length">
	  <view class="text-area">
	    <view class="item" v-for="(item, index) in dataArr" :key="index">
	      <view  class="u-slot-title1 line">
	        <view class="left">订单号</view>
	        <view class="right">{{ item.orderPayNumber || "--" }} </view>
	      </view>
	      <view class="u-slot-title1 line">
	        <view class="left">{{ item.payType || "--" }} </view>
	        <view class="right tips2">{{ item.price || "--" }} </view>
	      </view>
	      <view class="u-slot-title1">
	        <view class="left">交易时间 </view>
	        <view class="right">{{ item.payTime || "--" }} </view>
	      </view>
	    </view>
	  </view>
	  <view>
	    <u-loadmore
	      :status="status"
	      :loading-text="loadingText"
	      :loadmore-text="loadmoreText"
	      :nomore-text="nomoreText"
	    />
	  </view>
  <!--  <scroll-view
      class="scroll-box"
      :scroll-y="true"
      @scrolltolower="onReachBottom"
      lower-threshold="150"
    >
  
     
    </scroll-view> -->
  </view>
  
  <view
    class="bill-box"
    v-else-if="dataArr && dataArr.length === 0 && showFlag"
  >
    <view class="no-data">暂无数据</view>
  </view>
</template>

<script>
import { getStoreData, setStoreData, httpPost, httpGet } from "@/utils/http.js";
const date = new Date();
const year = date.getFullYear();
const month =
  date.getMonth() + 1 > 9 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1);
const date1 = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
export default {
  data() {
    return {
      showFlag: false,
      dataArr: [],
      status: "loadmore",
      loadingText: "努力加载中",
      loadmoreText: "",
      nomoreText: "",
      listInfo: {
        pageNo: 1,
        pageSize: 10,
        pages: 0,
        total: 0,
      },
	  isPageUp:true,//是否下拉翻页
	  startTime:"",
	  endTime:""
    };
  },
  onShow() {
    this.showFlag = false;
   this.getdataFun();
  },
  onReachBottom(){
	  if ((this.listInfo.pageNo <= this.listInfo.pages)&&this.isPageUp==true) {
	  	this.status = "loading";
	  	this.listInfo.pageNo++;
	  	this.getdataFun();
	  } else {
	  	this.status = "nomore";
	  }
  },
  methods: {
    
    getdataFun() {
      const _this = this;
      httpPost("/api/orderform/outline/listPay", {
        pageNo: this.listInfo.pageNo,
        pageSize: 10,
      })
        .then((res) => {
          const result = res.data;
		  
	  
          _this.listInfo.pages = result.totalPage;
		  _this.dataArr=[..._this.dataArr,...result.list];
		  if(result.totalPage>1){
			  let end=_this.dataArr[0].addTime.substring(0, 11);
			  let star=_this.dataArr[_this.dataArr.length-1].addTime.substring(0, 11);
			  console.log(star,end)
			  _this.endTime=new Date(end).getTime()/1000;//秒
			  _this.startTime=new Date(star).getTime()/1000;//秒
			  //console.log(_this.startTime)
			  let between=Math.round((_this.endTime-_this.startTime)/3600/24);
			  console.log(between)
			  if(between>30){//时间间隔超过30天就不让下拉翻页
				  _this.isPageUp=false;
			  }else{
				  _this.isPageUp=true;
			  }
		  }else{
			  _this.isPageUp=true;
		  }
		  
          
          if ((_this.listInfo.pageNo >= result.totalPage)&&_this.isPageUp==false) {
            _this.status = "nomore";
            _this.nomoreText = "没有更多了";
          } else {
            _this.status = "loading";
            _this.nomoreText = "";
          }
		  //console.log(_this.dataArr)
          _this.showFlag = true;
        }).catch((e) => {
          _this.showFlag = true;
        });
    },
  },
};
</script>

<style lang="scss">
.bill-box {
  
  background: #f8f8f8;
  width: 100vw;
  min-height: 100vh;
  .no-data {
    width: 100%;
    color: #666;
    text-align: center;
    margin: 48px;
  }
  .item {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 12px 8px;
    .line {
      border-bottom: 1px solid #eee;
    }
  }
  .text-area {
    width: calc(100vw - 32px);
    color: #333;
    font-size: 14px;
    margin: 16px;
	padding-top: 20rpx;
    .tips2 {
      color: #f00;
      text-align: right;
    }
    .title {
      line-height: 30px;
      color: #666;
      margin-left: 16px;
    }
  }
  .u-slot-title1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 40px;
  }
  .u-slot-title2 {
    display: flex;
    flex-direction: column;
  }
  .total {
    width: 120px;
    height: 120px;
    display: flex;
    margin-top: 32px;
    font-size: 14px;
    color: #fff;
    justify-content: center;
    align-content: center;
    background: linear-gradient(-90deg, #f90, #f60);
    box-shadow: 6px 12px 32px 12px rgba(247, 213, 62, 0.897);
    border-radius: 50%;
    .num {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .value {
        font-size: 16px;
        line-height: 30px;
      }
    }
  }
}
</style>
